<template>
  <div>
    <el-form ref="news" :model="news" label-width="100px">
      <el-tabs>
        <el-tab-pane label="基本配置">
          <Col v-bind="grid">
            <el-form-item
              label="标题:"
              prop="title"
              :rules="[{ required: true, message: '请输入标题' }]"
            >
              <el-input
                placeholder="请输入标题"
                autocomplete="off"
                v-model="news.title"
              ></el-input>
            </el-form-item>
          </Col>
          <Col v-bind="grid">
            <el-form-item label="简介:" prop="stitle">
              <el-input
                placeholder="请输入简介"
                autocomplete="off"
                v-model="news.stitle"
              ></el-input>
            </el-form-item>
          </Col>
          <Col v-bind="grid" v-if="isImg">
            <el-form-item label="图片:">
              <ui-upload-much
                :upUrl="upUrl"
                :img-ar="news.imgAr"
                :headers="upHeaders"
                @onUpload="onUpload"
                @onRemove="upRemove"
                :maxLimit="1"
                :limit="1"
              ></ui-upload-much>
            </el-form-item>
          </Col>

          <Col v-bind="grid">
            <el-form-item label="发布时间:" prop="stitle">
              <el-date-picker
                placeholder="发布时间"
                type="datetime"
                autocomplete="off"
                v-model="news.one_time"
              ></el-date-picker>
            </el-form-item>
          </Col>

          <Col v-bind="grid">
            <el-form-item label="内容:">
              <vue-ueditor-wrap
                v-model="news.content"
                @beforeInit="addCustomDialog"
                :config="myConfig"
                style="width: 95%"
              ></vue-ueditor-wrap>
            </el-form-item>
          </Col>

          <Col v-bind="grid" v-if="isFile">
            <el-form-item label="资料文件:" style="margin-bottom: 0">
              <div class="fx-h">
                <div
                  style="margin: 4px 0"
                  class="filename fx-r fx-bc"
                  v-for="(item, index) in news.attachment"
                  :key="index"
                >
                  <svg
                    v-if="item.code == 'xls'"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2451"
                    width="20"
                    height="20"
                    class="icon"
                  >
                    <path
                      data-v-8b28daa8=""
                      d="M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z"
                      fill="#E9EDED"
                      p-id="2452"
                    ></path>
                    <path
                      data-v-8b28daa8=""
                      d="M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z"
                      fill="#25B39E"
                      p-id="2453"
                    ></path>
                    <path
                      data-v-8b28daa8=""
                      d="M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144"
                      fill="#25B39E"
                      p-id="2454"
                    ></path>
                    <path
                      data-v-8b28daa8=""
                      d="M272 320a16 16 0 0 0-16 16v320a16 16 0 0 0 16 16h480a16 16 0 0 0 16-16v-320a16 16 0 0 0-16-16h-318.88a16 16 0 0 0-1.12 0h-160z m16 32h128v32H288v-32z m160 0h128v32h-128v-32z m160 0h128v32h-128v-32zM288 416h128v32H288v-32z m160 0h128v32h-128v-32z m160 0h128v32h-128v-32zM288 480h128v32H288v-32z m160 0h128v32h-128v-32z m160 0h128v32h-128v-32zM288 544h128v32H288v-32z m160 0h128v32h-128v-32z m160 0h128v32h-128v-32zM288 608h128v32H288v-32z m160 0h128v32h-128v-32z m160 0h128v32h-128v-32z"
                      fill="#25B39E"
                      p-id="2455"
                    ></path>
                    <path
                      data-v-8b28daa8=""
                      d="M431.616 799.936a16 16 0 0 0-15.744 16.256v127.616a16 16 0 0 0 0 0.192 16 16 0 0 0 0 0.64 16 16 0 0 0 0.064 0.736 16 16 0 0 0 0.064 0.448 16 16 0 0 0 10.048 13.056 16 16 0 0 0 0.512 0.192 16 16 0 0 0 4.448 0.864 16 16 0 0 0 1.12 0.064h63.616a16 16 0 1 0 0-32h-47.872v-111.808a16 16 0 0 0-16.256-16.256zM272.576 800a16 16 0 0 0-1.632 0.064 16 16 0 0 0-11.744 25.76l40.736 54.4-40.736 54.4a16 16 0 0 0 25.6 19.2l35.136-46.88 35.136 46.88a16 16 0 0 0 25.6-19.2l-40.736-54.4 40.736-54.4a16 16 0 0 0-13.792-25.76 16 16 0 0 0-11.84 6.56l-35.104 46.88L284.8 806.624A16 16 0 0 0 272.576 800z m317.92 0a16 16 0 0 0-1.984 0.384c-24.64 1.92-44.384 22.528-44.384 47.616 0 25.28 20.064 46.08 44.992 47.68a16 16 0 0 0 3.008 0.32h32c9.152 0 16 6.848 16 16 0 9.152-6.848 16-16 16h-64a16 16 0 1 0 0 32h64a16 16 0 0 0 3.296-0.384 48.096 48.096 0 0 0 44.704-47.616c0-25.152-19.84-45.856-44.576-47.68a16 16 0 0 0-3.424-0.32h-30.88a16 16 0 0 0-1.12 0 15.616 15.616 0 0 1-16-16c0-9.152 6.848-16 16-16h64a16 16 0 1 0 0-32h-62.88a16 16 0 0 0-1.12 0 16 16 0 0 0-1.6 0z"
                      fill="#E9EDED"
                      p-id="2456"
                    ></path>
                  </svg>
                  <svg
                    v-if="item.code == 'ppt'"
                    t="1683364770715"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3700"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M847.872 240.128v688c0 26.56-21.408 48-48 48h-576c-26.56 0-48-21.44-48-48v-832c0-26.592 21.44-48 48-48h432z"
                      fill="#E9EDED"
                      p-id="3701"
                    ></path>
                    <path
                      d="M495.744 288a16 16 0 0 0-15.744 16.256V320h-144a16 16 0 0 0-16 16v224a16 16 0 0 0 16 16h73.76l-24.96 74.752a16 16 0 1 0 30.4 10.112L443.488 576H480a16 16 0 0 0 0 0.064V672a16 16 0 1 0 32 0v-95.936A16 16 0 0 0 512 576h36.48l28.32 84.864a16 16 0 1 0 30.4-10.112L582.24 576H656a16 16 0 0 0 16-16v-224a16 16 0 0 0-16-16H512v-15.744A16 16 0 0 0 495.744 288zM352 352h288v192h-76.576a16 16 0 0 0-4.096-0.384 16 16 0 0 0-2.88 0.384H435.52a16 16 0 0 0-3.36-0.384 16 16 0 0 0-3.68 0.384H352v-192z"
                      fill="#F17F53"
                      p-id="3702"
                    ></path>
                    <path
                      d="M160 768.128v160c0 35.456 28.544 64 64 64h576c35.456 0 64-28.544 64-64v-160H160z"
                      fill="#F17F53"
                      p-id="3703"
                    ></path>
                    <path
                      d="M847.872 240.128h-144c-26.56 0-48-21.44-48-48v-144"
                      fill="#F17F53"
                      p-id="3704"
                    ></path>
                    <path
                      d="M559.616 799.808a16 16 0 0 0-2.368 0.192h-29.376a16 16 0 1 0 0 32h16v111.808a16 16 0 1 0 32 0V832h16a16 16 0 1 0 0-32h-29.504a16 16 0 0 0-2.752-0.192zM303.872 800c-24.768 0-45.152 19.296-47.488 43.52l-0.064 0.32a16 16 0 0 0-0.448 3.968v96a16 16 0 1 0 32 0v-50.816c5.024 1.824 10.368 3.008 16 3.008 26.336 0 48-21.664 48-48s-21.664-48-48-48z m128 0c-24.896 0-45.376 19.456-47.552 43.84a16 16 0 0 0-0.448 3.968v96a16 16 0 1 0 32 0v-50.816c5.024 1.824 10.368 3.008 16 3.008 26.336 0 48-21.664 48-48s-21.664-48-48-48z m-128 32c9.024 0 16 6.976 16 16 0 9.024-6.976 16-16 16a15.776 15.776 0 0 1-16-16v-0.192a15.776 15.776 0 0 1 16-15.808z m128 0c9.024 0 16 6.976 16 16 0 9.024-6.976 16-16 16a15.776 15.776 0 0 1-16-16v-0.192a15.776 15.776 0 0 1 16-15.808z"
                      fill="#E9EDED"
                      p-id="3705"
                    ></path>
                  </svg>
                  <svg
                    v-if="item.code == 'doc'"
                    t="1683366782378"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="3509"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M950.272 843.776H527.36c-16.384 0-29.696-13.312-29.696-29.696V210.944c0-16.384 13.312-29.696 29.696-29.696h422.912c16.384 0 29.696 13.312 29.696 29.696v603.136c0 16.384-13.312 29.696-29.696 29.696z"
                      fill="#E8E8E8"
                      p-id="3510"
                    ></path>
                    <path
                      d="M829.44 361.472H527.36c-16.384 0-29.696-13.312-29.696-29.696s13.312-29.696 29.696-29.696H829.44c16.384 0 29.696 13.312 29.696 29.696 0 15.36-13.312 29.696-29.696 29.696z m0 120.832H527.36c-16.384 0-29.696-13.312-29.696-29.696s13.312-29.696 29.696-29.696H829.44c16.384 0 29.696 13.312 29.696 29.696s-13.312 29.696-29.696 29.696z m0 119.808H527.36c-16.384 0-29.696-13.312-29.696-29.696s13.312-29.696 29.696-29.696H829.44c16.384 0 29.696 13.312 29.696 29.696s-13.312 29.696-29.696 29.696z m0 120.832H527.36c-16.384 0-29.696-13.312-29.696-29.696s13.312-29.696 29.696-29.696H829.44c16.384 0 29.696 13.312 29.696 29.696s-13.312 29.696-29.696 29.696z"
                      fill="#B2B2B2"
                      p-id="3511"
                    ></path>
                    <path
                      d="M607.232 995.328l-563.2-107.52V135.168l563.2-107.52v967.68z"
                      fill="#0D47A1"
                      p-id="3512"
                    ></path>
                    <path
                      d="M447.488 696.32h-71.68l-47.104-236.544c-3.072-13.312-4.096-27.648-4.096-40.96h-1.024c-1.024 16.384-3.072 30.72-5.12 40.96L269.312 696.32H194.56l-74.752-368.64h70.656l39.936 245.76c2.048 10.24 3.072 24.576 4.096 41.984h1.024c0-13.312 3.072-27.648 6.144-43.008l51.2-244.736h68.608l47.104 247.808c2.048 9.216 3.072 22.528 4.096 39.936h1.024c1.024-13.312 2.048-26.624 4.096-40.96l39.936-245.76H522.24L447.488 696.32z"
                      fill="#FFFFFF"
                      p-id="3513"
                    ></path>
                  </svg>
                  <svg
                    v-if="item.code == 'pdf'"
                    t="1683366902012"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="9681"
                    width="20"
                    height="20"
                  >
                    <path
                      d="M534.78 74.67h57.71v91.61c108.81 0.61 217.73-1.12 326.43 0.51 23.41-2.24 41.74 16 39.39 39.39 1.73 190.15-0.41 380.39 1 570.64-1 20.56 2 43.36-9.77 61.58-14.86 10.78-34.2 9.36-51.6 10.18-101.79-0.51-203.58-0.31-305.47-0.31v101.8h-63.3C374 921.77 218.61 895.92 63.38 868.64q-0.15-356.22 0-712.33c157.07-27.18 314.13-54.87 471.4-81.64z"
                      fill="#DC2E1B"
                      p-id="9682"
                    ></path>
                    <path
                      d="M110.51 551.6V427.19h37.32q21.22 0 27.65 1.87 9.9 2.8 16.57 12.18t6.68 24.23q0 11.45-3.85 19.25A33.46 33.46 0 0 1 185.1 497a32.41 32.41 0 0 1-12.1 5.88q-8.34 1.79-24.12 1.79h-15.12v46.93z m23.25-103.37v35.31h12.73q13.75 0 18.38-1.95a15.53 15.53 0 0 0 7.27-6.11 17.74 17.74 0 0 0 2.63-9.67 16.84 16.84 0 0 0-3.7-11.2 15.77 15.77 0 0 0-9.34-5.52q-4.18-0.85-16.73-0.85zM217.74 427.19h42.51q14.37 0 21.92 2.38A38.25 38.25 0 0 1 299.52 441a55.26 55.26 0 0 1 11 20.15q3.77 11.93 3.78 29.41 0 15.36-3.54 26.47-4.32 13.58-12.34 22-6 6.37-16.33 9.93-7.71 2.64-20.59 2.63h-43.76z m23.26 21v82.41h17.36q9.74 0 14.07-1.18a21 21 0 0 0 9.38-5.18q3.73-3.65 6.08-12t2.37-22.78q0-14.43-2.37-22.16t-6.59-12a21.61 21.61 0 0 0-10.77-5.85q-4.88-1.19-19.09-1.19zM334.16 551.6V427.19h78.95v21h-55.7v29.45h48.08v21h-48.08v52.96z"
                      fill="#FFFFFF"
                      p-id="9683"
                    ></path>
                    <path
                      d="M815.32 596.59a22.61 22.61 0 0 0-3.14-2.81c-4.66-3.52-14.15-8.66-32.86-13.11q-2.79-0.67-5.77-1.29c12.42 9.27 23 15 31.7 17 5.21 1.3 8.38 0.8 10.07 0.21zM708.86 409c2.43-8.52 4.09-23.81 0.57-26.88l-0.06 0.07c-4.7 6.5-10.64 33.19-8.67 49.29 3.73-6.64 4.91-11.08 8.16-22.48zM709.47 552.2A211.78 211.78 0 0 1 683 499.62a541.34 541.34 0 0 1-45.11 54.52c16.99-1.68 43.93-2.64 71.58-1.94z"
                      fill="#FFFFFF"
                      p-id="9684"
                    ></path>
                    <path
                      d="M589.1 196.82v361.91c9.41-2.69 15.9-4.05 15.9-4.05 5.64-5.88 5-5.33 11.77-12.6a758.94 758.94 0 0 0 59.94-73.54c-0.18-2.36-6.65-91.12 21.44-102.93a18.67 18.67 0 0 1 11.64-0.85c5.13 1.22 10 4.54 12.5 8.45 6.34 10.07 6.22 24.77 1 45.35-8.28 32.57-20.9 50.71-20.9 50.71s4 40.18 42 84.79c17.45 1.48 32.46 3.69 44.64 6.59 20.94 5 33.39 11.92 38.06 21.19 2.64 5.24 3 11.7-0.16 19.32s-6.37 11.4-12.2 13.64c-4.88 1.88-11 2-18.13 0.26-21.32-5.08-49.59-25.37-68-41.71-29.78-2.34-65.92-2.6-107.48-0.8q-18.53 19.91-32.07 31.85v213.35H925V196.82z"
                      fill="#FFFFFF"
                      p-id="9685"
                    ></path>
                  </svg>

                  <span style="margin-left: 10px">{{ item.title }}</span>
                  <div class="del" @click="tapAttDel(index)">删除</div>
                </div>
              </div>
              <div style="margin: 10px 0">
                <ui-fileupdate
                  :upUrl="upUrl2"
                  :headers="upHeaders"
                  ref="fileupdate"
                  @onSuccess="tapFileSuccess"
                ></ui-fileupdate>
              </div>
            </el-form-item>
          </Col>

          <Col v-bind="grid">
            <el-form-item label="显示:" style="margin-bottom: 0">
              <el-radio-group v-model="news.is_show">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </Col>
          <Col v-bind="grid">
            <div style="margin-top: 10px"></div>
            <el-form-item>
              <el-button type="primary" @click="formSub">提交数据</el-button>
            </el-form-item>
          </Col>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>
<style>
.filename {
  border: 1px solid #f1f1f1;
  border-radius: 5px;
  padding: 0px 5px;
}
.filename .del {
  margin-left: 10px;
  font-size: 12px;
  color: #cf9236;
  cursor: pointer;
}
.filename .del:hover {
  opacity: 0.5;
}
</style>
<script>
import { mapState, mapActions } from 'vuex'
import VueUeditorWrap from 'vue-ueditor-wrap'
import IPageHeader from '../../../../layouts/system/page-header/index'
import UiUploadMuch from '@/ui/upload/more_index'
import util from '@/libs/util'
import { SystemNewsSave, SystemNewsItem } from '@/api/system/news'
import Setting from '../../../../setting'
import UiFileupdate from '../../../../ui/upload/ui-fileupdate'
export default {
  name: 'new_info_notce_add',
  components: {
    UiFileupdate,
    IPageHeader,
    UiUploadMuch,
    VueUeditorWrap,
  },
  computed: {
    ...mapState('system/page', ['opened', 'current']),
  },

  props: {
    cate_id: {
      default: 0,
      type: Number,
    },
    title: {
      default: '',
      type: String,
    },
    isFile: {
      default: false,
      type: Boolean,
    },
    isImg: {
      default: false,
      type: Boolean,
    },
  },

  data() {
    return {
      upUrl: '',
      upUrl2: '',
      upHeaders: {},
      // 搜索区域
      grid: {
        xl: 24,
        lg: 24,
        md: 24,
        sm: 24,
        xs: 24,
      },
      news: {
        id: 0,
        title: '',
        cate_id: 0,
        is_show: 0,
        stitle: '',
        is_tui: 0,
        is_hot: 0,
        img: '',
        imgAr: [],
        content: '',
        attachment: [],
      },
      cateAr: [],
      myConfig: {
        autoHeightEnabled: false, // 编辑器不自动被内容撑高
        initialFrameHeight: 400, // 初始容器高度
        initialFrameWidth: '100%', // 初始容器宽度
        UEDITOR_HOME_URL: Setting.apiBaseURL + '/UEditor/',
        serverUrl: '',
      },
    }
  },
  created() {
    var upHeaders = {}
    // 上传路径
    this.upUrl = Setting.apiBaseURL + '/systemv1/upload/index'
    this.upUrl2 = Setting.apiBaseURL + '/systemv1/upload/attachment'
    // 上传header数据
    const token = util.cookies.get('system_token')
    if (token) {
      upHeaders['SYSTEM-ACC-TOKEN'] = token
    }
    this.upHeaders = upHeaders

    setTimeout(() => {
      this.$refs['fileupdate'].upWeb()
    }, 500)
  },
  mounted() {
    var id = this.$route.query.id || 0
    util.title({ title: this.title })
    var PromiseAr = []
    if (id > 0) {
      PromiseAr.push(SystemNewsItem({ id: id }))
      let loading = this.$loading('获取数据中...')
      Promise.all(PromiseAr)
        .then((res) => {
          loading.close()
          var data = res[0].data
          data.imgAr = res[0].data.img
          this.news = data
        })
        .catch((err) => {
          console.log(err)
          loading.close()
          this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
        })
    } else {
      this.news.one_time = this.$utils.date('Y-m-d H:i:s')
    }
  },
  methods: {
    ...mapActions('system/page', ['close']),

    addCustomDialog: function (editorId) {
      window.UE.registerUI(
        'test-dialog',
        function (editor, uiName) {
          // 创建 dialog
          let dialog = new window.UE.ui.Dialog({
            iframeUrl: '/system/widget/images/index.html?fodder=dialog',
            editor: editor,
            name: uiName,
            title: '上传图片',
            cssRules: 'width:600px;height:500px;padding:20px;',
          })
          this.dialog = dialog
          let btn = new window.UE.ui.Button({
            name: 'dialog-button',
            title: '上传图片',
            cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -726px -77px;`,
            onclick: function () {
              // 渲染dialog
              dialog.render()
              dialog.open()
            },
          })
          return btn
        },
        37
      )
    },
    /**
     * 修改数据
     */
    formSub: function () {
      this.$refs['news'].validate((valid) => {
        if (valid) {
          let loading = this.$loading('提交数据中...')
          SystemNewsSave({
            ...this.news,
            cate_id: this.cate_id,
          })
            .then((res) => {
              loading.close()
              if (res.code == 200) {
                this.$Message.success(res.msg)
                this.close({ tagName: this.current })
              } else {
                this.$alert(res.msg, '系统提示')
              }
            })
            .catch((err) => {
              console.log(err)
              loading.close()
              this.$alert('网络繁忙，加载失败，请稍等片刻在尝试!', '系统提示')
            })
        } else {
          this.$Message.error('请完成信息!')
        }
      })
    },
    /**
     * 上传文件
     * @param res
     */
    onUpload: function (res) {
      if (res.code == -1) {
        Notice.error({ title: '系统提示', content: res.msg })
      } else {
        this.news.imgAr = [res.data.img]
      }
    },
    /**
     * 删除图片
     * @param index
     */
    upRemove: function (index) {
      this.news.imgAr = []
      // this.$delete(this.formValidate,"imgAr",index);
    },

    tapFileSuccess: function (data) {
      this.news.attachment.push({
        ...data.data,
        code: this.getExp(data.data.title),
      })
    },

    tapAttDel: function (index) {
      this.news.attachment.splice(index, 1)
    },

    getExp: function (item) {
      let index = item.lastIndexOf('.')
      let exp = item.substr(index + 1)
      //xls
      if (['csv', 'xls', 'xlsx'].indexOf(exp.toLowerCase()) >= 0) {
        return 'xls'
      }
      //pdf
      if (['pdf'].indexOf(exp.toLowerCase()) >= 0) {
        return 'pdf'
      }
      //word
      if (['docx', 'doc', 'wps'].indexOf(exp.toLowerCase()) >= 0) {
        return 'doc'
      }
      //ppt
      if (['ppt', 'pptx'].indexOf(exp.toLowerCase()) >= 0) {
        return 'ppt'
      }
      //zip
      if (['zip', 'rar'].indexOf(exp.toLowerCase()) >= 0) {
        return 'zip'
      }

      if (['jpg', 'jpeg', 'png'].indexOf(exp.toLowerCase()) >= 0) {
        return 'jpg'
      }

      return ''
    },
  },
}
</script>
